<template>
  <div v-loading="loading">
    <el-table
      empty-text="无数据"
      ref="tableData"
      :stripe="stripe"
      :size="tableSize"
      :data="tableList"
      :height="height"
      :cell-style="handleCellStyle"
      :row-style="handleRowStyle"
      :cell-class-name="handleCellClassName"
      fit
      @selection-change="handleSelectionChange"
      @current-change="handleTableCurrentChange"
      @row-click="handleTableRowClick"
      @cell-click="handleCellClick"
      v-bind="otherConfig"
    >
      <template v-for="(item, index) in columns">
        <!-- 选择框 -->
        <el-table-column
          v-if="item.selection"
          type="selection"
          width="50"
          :fixed="item.fixed"
          align="center"
          header-align="center"
          :key="`selection_${index}`"
        ></el-table-column>
        <!-- 序号 -->
        <el-table-column
          v-else-if="item.index"
          type="index"
          width="80"
          :fixed="item.fixed"
          label="序号"
          :index="item.indexMethod"
          :key="`index_${index}`"
        ></el-table-column>
        <!-- 多级表头 -->
        <el-table-column
          v-else-if="item.multi"
          align="center"
          :label="item.label"
          :key="`multi_${index}`"
        >
          <el-table-column
            v-for="(child, childIndex) in item.children"
            :key="`child_${index}_${childIndex}`"
            v-bind="child"
          >
          </el-table-column>
          <slot
            show-overflow-tooltip
            :name="item.slot"
            :fixed="item.fixed"
            :width="item.width"
            :height="item.height"
          ></slot>
        </el-table-column>
        <!-- 自定义内容 -->
        <slot
          v-else-if="item.slot"
          show-overflow-tooltip
          :name="item.slot"
          :fixed="item.fixed"
          :width="item.width"
          :height="item.height"
        ></slot>
        <!-- 常规字段 -->
        <el-table-column
          v-else
          show-overflow-tooltip
          v-bind="item"
          :fixed="item.fixed"
          :min-width="item.minWidth"
          :key="`normal_${index}`"
        ></el-table-column>
      </template>
    </el-table>
    <!-- eslint-disable -->
    <el-pagination
      v-if="isPaginationShow && pagination.total"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 40, 100]"
      :current-page="pagination.current"
      :page-size.sync="pagination.size"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <!-- eslint-enable -->
    <!-- 自定义内容 -->
    <slot name="custom-content"></slot>
  </div>
</template>
<script>
import {reactive,toRefs,onUpdated,watch} from "vue";
export default {
  name: "YgTable",
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    tableList: {
      type: Array,
      default: () => [],
    },
    pagination: {
      type: Object,
      default: () => ({
        current: 1,
        size: 10,
        total: 0,
      }),
    },
    isPaginationShow: {
      type: Boolean,
      default: true,
    },
    // wrapperHeight: {
    //   type: [Number, String],
    //   default: '100%', // 一般情况下，更多地是配置父元素的高度，table的高度根据父元素高度计算
    // },
    // height: {
    //   type: [Number, String],
    //   default: 'calc(100% - 48px)', // table的默认高度是 父元素高度 减去 pagination高度，一般情况下，这个默认配置就够用了，有特殊场景可以另配置
    // },
    // maxHeight: {
    //   type: [Number, String],
    //   default: 'auto',
    // },
    tableSize: {
      type: String,
      default: "default",
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
      default: "500",
    },
    otherConfig: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
    handleCellStyle: {
      type: Function,
      default: () => {},
    },
    handleRowStyle: {
      type: Function,
      default: () => {},
    },
    handleCellClassName: {
      type: Function,
      default: () => {},
    },
    handleCellClick: {
      type: Function,
      default: () => {},
    },
  },
  setup(_,{emit}){
    const data=reactive({
      tableData:null,
    })
    function handleCurrentChange(val) {
      emit("getData", val);
    }
    // 切换每页条数
    function handleSizeChange(val) {
      emit("getDataNum", val);
    }
    // 切换选择
    function handleSelectionChange(val) {
      emit("changeSelection", val);
    }
    // 单选
    function handleTableCurrentChange(currentRow) {
      emit("changeCurrent", currentRow);
    }
    // 点击行
    function handleTableRowClick(currentRow) {
      emit("rowClick", currentRow);
    }
    // 监听数据变化
    // watch(data.tableData, () => {
    //   // 注意：这里我们不能直接在 watch 回调中访问 DOM，因为 ref 可能还没准备好
    //   // 所以我们在 onUpdated 钩子中处理滚动逻辑
    // }, { immediate: true }); // 如果需要立即执行一次，可以添加 immediate: true

    onUpdated(() => {
      // 在组件更新后执行
      if (data.tableData.value && data.tableData.value.$refs && data.tableData.value.$refs.bodyWrapper) {
        // 确保 ref 和内部的 $refs 都已经设置
        data.tableData.value.$refs.bodyWrapper.scrollTop = 0;
      }
    });
    function setScrollTop(){
      data.tableData.setScrollTop(0);
    }
    return ({
      setScrollTop,
      ...toRefs(data),
      handleTableRowClick,
      handleTableCurrentChange,
      handleSelectionChange,
      handleSizeChange,
      handleCurrentChange
    })

  },
  // watch: {
  //   data() {
  //     // 重新请求数据时 table滚动到顶部
  //     this.$refs.tableData.$refs.bodyWrapper.scrollTop = 0;
  //   },
  // },
};
</script>
<style lang="scss" scoped>
.el-pagination {
  float: right;
}
</style>
